<template>
    <el-container>
        <el-aside class="aside" style="width: 200px;">
            <el-input v-model="input" placeholder="查找咨询人记录" style="width: 200px;" clearable
                      @keyup.enter.native="handleQuery">
                <i slot="prefix" class="el-input__icon el-icon-search" style="cursor: pointer"></i>
            </el-input>
            <div style="margin-top: 15px;text-align: center;">
                <el-button type="goon" @click="clickA" icon="el-icon-position" style="display: block;width: 100%;text-align: left;
				margin-left: 0px;font-size: 13px;
				margin-top: 15px;">心理咨询记录
                </el-button>
                <el-button type="goon" @click="clickB" icon="el-icon-position" style="display: block;width: 100%;text-align: left;
				margin-left: 0px;font-size: 13px;
				margin-top: 15px;">防诈骗咨询记录
                </el-button>
            </div>
        </el-aside>
        <el-main class="container" style="padding-top: 0px;">
            <!-- 按钮添加 -->
            <div class="tableBar">
                <div class="tableLab" style="display: inline-block;margin-left: 0px;">
                    <el-date-picker v-model="orderTime" clearable value-format="yyyy-MM-dd HH:mm:ss"
                                    type="datetimerange" unlink-panels placeholder="选择日期" range-separator="至"
                                    start-placeholder="开始日期" end-placeholder="结束日期"
                                    :default-time="['00:00:00', '23:59:59']"
                                    style="width: 400px;margin-left: 0px;"></el-date-picker>
                    <el-button type="primary" class="search-btn" @click="handleQuery">查询</el-button>
                </div>
                <el-button-group class="crud-opts-right" style="display: block;float: right;">
                    <el-button size="mini" type="danger" icon="el-icon-ali-shanchu" @click="deleteHandle('批量', null)">
                        批量删除
                    </el-button>
                </el-button-group>
            </div>
            </div>

            <!-- el-table展示 -->
            <el-table v-loading="loading" :data="tableData" style="width: 100%" class="tableBox" border fit stripe
                      tooltip-effect="dark" :header-cell-class-name="'headerBg'"
                      @selection-change="handleSelectionChange">
                <el-table-column align="center" type="selection" width="40px" style="border: none;"></el-table-column>
                <el-table-column align="center" :label="colHeader.time" prop="chatTime" :formatter="formatDate"
                                 min-width="15%">
                </el-table-column>
                <el-table-column align="center" :label="colHeader.people" prop="nickname"
                                 min-width="15%"></el-table-column>
                <el-table-column align="center" :label="colHeader.content" prop="textMessage" min-width="40%"
                                 :show-overflow-tooltip='true'></el-table-column>
                <el-table-column label="操作" align="center" min-width="10%">
                    <template slot-scope="scope">
                        <el-button type="text" size="midium" class="delBut common"
                                   @click="deleteHandle('单删', scope.row.id)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 底部分页 -->
            <el-pagination style="text-align: center;" class="pageList" :page-sizes="[7,9,13]" :page-size="pageSize"
                           layout="total, sizes, prev, pager, next, jumper" :total="counts" :current-page.sync="page"
                           @size-change="handleSizeChange" @current-change="handleCurrentChange">
            </el-pagination>
        </el-main>
    </el-container>
</template>

<script>
    import {
        showLoading,
        hideLoading
    } from '../utils/Loading.js'
    import {
        query,
        deleteById
    } from '@/api/chat.js'

    export default {
        name: 'Consult',
        data() {
            return {
                data: [{
                    label: '防诈骗咨询记录'
                }, {
                    label: '心理咨询记录'
                }],
                type: 'anti',
                loading: true,
                orderTime: [],
                user: {},
                checkList: [],
                tableData: [],
                input: '',
                counts: 0,
                page: 1,
                ids: '',
                pageSize: 9,
                id: '',
                status: '',
                colHeader: {
                    time: '评论时间',
                    people: '咨询人',
                    content: '心理咨询内容'
                }
            }
        },
        created() {
            this.$store.commit('setPath', '咨询记录管理')
            this.init()
        },
        methods: {
            async init() {
                const params = {
                    page: this.page,
                    pageSize: this.pageSize,
                    name: this.input ? this.input : "",
                    type: this.type,
                    duration: this.orderTime ? this.orderTime.join('--') : ""
                }
                await query(params).then(res => {
                    this.loading = false
                    this.tableData = res.data.chats
                    this.counts = parseInt(res.data.total)
                    // }
                }).catch(err => {
                    this.loading = false
                    this.$message.error('请求出错了：' + err)
                })
            }, //方法区

            clickA() {
                this.colHeader.content = '心理咨询内容'
                this.type = 'anti'
                this.handleQuery()
            },
            clickB() {
                this.colHeader.content = '防诈骗咨询内容'
                this.type = 'psy'
                this.handleQuery()
            },
            handleSizeChange(val) {
                this.pageSize = val
                this.handleQuery()
            },


            handleCurrentChange(val) {
                this.page = val
                this.init()
            },

            handleQuery() {
                this.page = 1;
                this.init();
            },

            // 全部操作
            handleSelectionChange(val) {
                let checkArr = []
                val.forEach((n) => {
                    checkArr.push(n.id)
                })
                console.log(val)
                this.checkList = checkArr
            }, //方法区
            formatDate(row, column) {
                // 获取单元格数据
                let data = row[column.property]
                if (data == null) {
                    return null
                }
                let dt = new Date(data)
                return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate() +
                    ' ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds()
            },
            changeEnable(data, status) {
                const operation = status == '0' ? '恢复' : '封杀'
                this.$confirm('此操作将 "' + operation + '" ' + data.userNickname + '发布的分享, 是否继续？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.statusHandle(data)
                })
            },

            // 删除
            deleteHandle(choice, id) {
                console.log(id)
                if (choice === '批量' && id === null) {
                    if (this.checkList.length === 0) {
                        return this.$message.error('请选择删除对象')
                    }
                }
                this.$confirm('确认删除该用户, 是否继续?', '确定删除', {
                    'confirmButtonText': '确定',
                    'cancelButtonText': '取消',
                }).then(() => {
                    const params = {
                        ids: choice === '批量' ? this.checkList.join(',') : id,
                        type: this.type
                    }
                    deleteById(params).then(res => {
                        if (res.data == '1') {
                            this.$message.success('删除成功！')
                            this.handleQuery()
                        } else {
                            this.$message.error('操作失败')
                        }
                    }).catch(err => {
                        this.$message.error('请求出错了：' + err)
                    })
                })
            },
        }
    }
</script>

<style>
    .el-button--goon.is-active,
    .elbutton--goon:active {
        background: #4285F4;
        border-color: #4285F4;
        color: #fff;
    }

    .el-button--goon:hover {
        background: #cbcbcb;
        border-color: #cbcbcb;
        color: #fff;
    }

    .el-button--goon:focus {
        background: #48D1CC;
        border-color: #48D1CC;
        color: #fff;
    }

    .el-button--goon {
        color: #000000;
        background-color: #ffffff;
        border-color: #ffffff;
    }


    .dashboard-container .container .tableBox {
        width: 100%;
        border: solid 2px #f3f4f7;
        border-radius: 2px;
    }

    .el-link {
        margin-left: 15px;
    }

    .delBut {
        color: #f56c6c !important;
        position: relative;
    }

    .common::after {
        content: "";
        position: absolute;
        right: -6px;
        height: 14px;
        width: 0px;
        border-right: solid 1px #d1d3d9 !important;
    }
</style>
